<template>
<div class="container">
  <headerbar title="新鲜事" :useAdd="true"/>
  <scrollview
  class="list-content"
  @loadCallback="loadCallback"
  :isend="isend"
  :readyToLoad="readyToLoad"
  :dataList="dataList"
  >
 <post v-for="(item) in dataList" :key="item.mblog.id" :data="item" class="item"></post>
  </scrollview>
   <tabbar currentKey="index"/>
</div>  
</template>

<script>
import tabbar from '../../components/tabbar'
import headerbar from '../../components/headerbar'
import post from '@/components/post'
import scrollview from '@/components/scrollview'
import service from '@/utils/service'

export default {
  name: 'index',
  components: {
    tabbar,
    headerbar,
    post,
	scrollview
  },
  data(){
    return {
	 isend:false,
	 readyToLoad:true,
	 pageIndex:0
    }
   },
  async mounted(){
    this.loadCallback()
    console.log('aaa')
  },
   computed:{
	   dataList(){
		  return this.$store.state.weiboDataList // 从vuex的store获取数据
	   }
   },
   methods:{
	   async loadCallback(){
		if(this.pageIndex==2){
			this.isend=true;
			return;
		}
		this.readyToLoad=false;
		let resp=await service.get('json/list'+(this.pageIndex+1)+'.json');
		this.readyToLoad=true;
		let array=resp.data.cards||[];
		this.$store.dispatch('setWeiboDataList',array)
		this.pageIndex++;
	   }
   }
}
</script>
<style scoped>
.list-content{
  padding-bottom: 60px;
}
.list-content .item:nth-last-child(2){
  border-bottom: none;
}
.list-content .item:first-child{
  margin-top: 40px;
}
.item{
  border-bottom: 10px solid #eee;
}
</style>